import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: [],
    username: ''
  }
  render() {
    return (
      <div>
        <input type="text" value={ this.state.username } onChange = {(e) => {
          this.setState({
            username: e.target.value
          })
        }}/>
        <button onClick = {
          () => {
            const arr = this.state.list
            arr.push({
              status: 0,
              text: this.state.username
            })
            this.setState({
              list: arr,
              username: ''
            })
          }
        }>添加</button>
        <button onClick = { () => {
          const arr = this.state.list
          const newArr = arr.filter(item => item.status === 1)
          this.setState({
            list: newArr
          })
        }}>已完成数据</button>
        <ul>
          {
            this.state.list && this.state.list.map((item, index) => {
              return (
                <li>
                  { item.text }
                  {
                    item.status === 0
                    ? <span style={{ color: 'pink'}} onClick = { () => {
                      const arr = this.state.list
                      arr[index].status = 1
                      this.setState({
                        list: arr
                      })
                    }}>正在进行</span>
                    : <span style={{ color: 'green'}}>已完成</span>
                  }
                  
                  <button onClick = { () => {
                    const arr = this.state.list
                    arr.splice(index, 1)
                    this.setState({
                      list: arr
                    })
                  }}>删除</button>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
